<div class="mail-list">
  <a class="mail" #mailList fxLayout="row" (click)="onOpenMailDetialTriggered(mail)" *ngFor="let mail of mails">
    <div fxHide="true" [fxHide.gt-xs]="false" class="start-wrapper" fxFlex="180px" fxFlex.gt-sm="270px" fxLayout="row" fxLayoutAlign="start center">
      <mat-checkbox class="checkbox"></mat-checkbox>
      <button [fxHide]="true" [fxHide.gt-sm]="false" mat-icon-button>
        <mat-icon class="star" *ngIf="!mail.starred">star_border</mat-icon>
        <mat-icon class="star active" *ngIf="mail.starred">star</mat-icon>
      </button>
      <img [fxHide]="true" [fxHide.gt-sm]="false" class="from-avatar" src="assets/images/avatars/7.jpg">
      <span class="from-name">{{ mail.from.name }}</span>
    </div>
    <p class="content-wrapper" fxLayout="row" fxLayoutAlign="start center">
                <span class="labels">
                  <span class="label">{{ mail.labels.name }}</span>
                </span>
      <span class="subject">{{ mail.subject }}</span>
      <span class="middot">&middot;</span>
      <span class="content">{{ mail.content }}</span>
    </p>
    <div [fxHide]="true" [fxHide.gt-xs]="false" fxFlex="100px" fxFlex.gt-sm="200px" class="end-wrapper" fxLayout="row" fxLayoutAlign="end center">
      <span class="when">{{ mail.when }}</span>
      <button [fxHide]="true" [fxHide.gt-sm]="false"  class="options" [matMenuTriggerFor]="mailOptions" mat-icon-button>
        <mat-icon>more_vert</mat-icon>
      </button>
    </div>
  </a>
</div>


<div class="no-mails-container" fxLayout="column" fxLayoutAlign="start center" *ngIf="mails.length == 0">
  <span class="no-mails">没有邮件</span>
</div>


<mat-menu #mailOptions="matMenu">
  <button mat-menu-item> <mat-icon>markunread_mailbox</mat-icon>标记未读 </button>
  <button mat-menu-item> <mat-icon>label</mat-icon> 标签 </button>
  <mat-divider></mat-divider>
  <button mat-menu-item> <mat-icon>delete</mat-icon> 删除 </button>
</mat-menu>
